<template>
  <div class="info-item">
    <div class="title-info">
      <svg-icon name="home-work"/>
      <span class="sub-title">成果展示</span>
    </div>

    <div v-if="foodStore.currentFoodRecipe.recordList.length > 0" class="info record-info">
      <el-timeline>
        <el-timeline-item v-for="(item, index) in foodStore.currentFoodRecipe.recordList"
                          :key="index" :timestamp="item.date" placement="top">
          <el-card class="record-card">
            <span class="record-content">完成人：{{ item.person }}</span>
            <el-image v-if="item.imageUrl"
                      :src="serviceFileRootPath + item.imageUrl"
                      :preview-src-list="[serviceFileRootPath + item.imageUrl]"
                      fit="contain" alt="暂无图片" class="record-image"/>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-empty v-else description="暂无成果"/>
  </div>
</template>

<script setup lang="ts">
import { useFoodStore } from '@/store/food.ts'
import { serviceFileRootPath } from '@/utils'
import { SvgIcon } from 'vue3-common'

const foodStore = useFoodStore()
</script>
